<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
      const btnb = document.querySelector("buton");
      const video = document.querySelector("video");
      const canvas = document.querySelector("#canvas");
      const context = canvas.getContext("2d");
      //         font	设置或返回文本内容的当前字体属性。
      // textAlign	设置或返回文本内容的当前对齐方式。
      // textBaseline	设置或返回在绘制文本时使用的当前文本基线。

      //       参数	描述
      // text	规定在画布上输出的文本。
      // x	开始绘制文本的 x 坐标位置（相对于画布）。
      // y	开始绘制文本的 y 坐标位置（相对于画布）。
      // maxWidth	可选。允许的最大文本宽度，以像素计
      context.font = "60px sans-serif";
      context.textBaseline = "bottom";

      //   context.direction='inherit | ltr | rtl';
      context.direction = "rtl";

      context.textAlign = "right";
      //   返回需要测量文字的宽度
      const widthText = context.measureText("hellow!"); //返回包含指定文本宽度的对象。
      console.log(widthText);
      context.fillText("hellow!", 360, 100);
      context.strokeText("hellow!", 360, 200);
    </script>
  </body>
</html>
